<template>
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
                    <img :src="'http://39.104.16.173:8081'+item.imgSrc" alt="" />
                </div>
            </div>
            //换页器
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>
   
<script>
import "swiper/css/swiper.css"; //引入swiper样式
import Swiper from "swiper"; //引入swiper
// import axios from "axios"
export default {
    name: "Swiper",
    data() {
        return {
            imgs: [
                {
                    pic: require("../assets/img/banner.jpg")
                },
                {
                    pic: require("../assets/img/banner.jpg")
                },
                {
                    pic: require("../assets/img/banner.jpg")
                }
            ],
        };
    },
    created() {
        this.getBanner()
    },
    mounted() {
        var mySwiper = new Swiper("#swiperIndex", {
            //配置分页器内容
            direction: "horizontal",
            // autoplay:true,
            // delay:3000,
            mousewheel: true,
            effect:"cube",
            loop: true, // 循环模式选项
            pagination: {
                el: ".swiper-pagination", //换页器与哪个标签关联
                clickable: true, //分页器是否可以点击
            },


        });
    },
    methods:{
        getBanner(){
            let that = this;
          this.axios({
                method:"get",
                url:"http://39.104.16.173:8081/home/swiper"
            }).then(function(res){
                // console.log(that);
                that.imgs = res.data.body
            })
        }
    }
};
</script>
   
<style >
.swiper-container {
    width: 80%;
    height: 400px;
    border-radius: 0.1rem;
}

.swiper-slide img {
    width: 100%;
}

.swiper-pagination-bullet {
    background-color: white;
}

.swiper-pagination-bullet-active {
    background-color: orangered;
}</style>